<template>
    <div class="page-infinite">
        <div class="page-infinite-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
            <!--<ul class="page-infinite-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="50">-->
            <!--<li v-for="item in list" class="page-infinite-listitem">{{ item }}</li>-->
            <!--</ul>-->
            <mt-loadmore :top-method="loadTop" @translate-change="translateChange" @top-status-change="handleTopChange" ref="loadmore">
                <div class="card facebook-card" style="margin: 0" v-for="item in list">
                    <div class="card-content">
                        <video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"
                               poster="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509627611339&di=89e2846826718c7a2f2f5d3707cf2dc4&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F4d086e061d950a7be91b560503d162d9f3d3c9c1.jpg" data-setup="{}">
                            <source :src="'http://demo.mqphp.com'+item.path" type="video/mp4">
                            <!--<source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">-->
                            <!--<source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">-->
                            <p class="vjs-no-js">
                                To view this video please enable JavaScript, and consider upgrading to a web browser that
                                <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                            </p>
                        </video>
                        <!--<img :src="item.userHeadImg" alt="" width="100%"/>-->
                    </div>
                    <div class="card-header no-border">
                        <div class="facebook-avatar">
                            <img class="head_img" :src="item.userHeadImg" alt="" width="34" height="34"/>
                        </div>
                        <div class="facebook-name text-left">{{item.userName}}</div>
                        <div class="facebook-date text-left">{{item.startTime}}</div>
                        <div @click="like" style="display: inline-block;float: right;margin-top: -1.5rem">
                            <i id="like" class="icon iconfont icon-xihuan1" style="font-size: 1.2rem;margin-bottom: -0.5rem"></i>
                            <span style="display: block">
                                {{ likeCount }}
                            </span>
                        </div>
                        <div class="facebook-name text-left" style="margin: 0;">{{ item.Content }}</div>
                    </div>

                    <div class="card-footer" style="text-align: left;background: #fff;clear: both">
                        评论{{ comments_count }}
                    </div>
                    <div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="50">
                        <div class="list-block">
                            <ul>
                                <li class="item-content" v-for="item in commentList">
                                    <div class="item-media"><img :src="item.userHeadImg" width="30" alt=""></div>
                                    <div class="item-inner">
                                        <div class="comment-style">{{ item.content }}</div>
                                        <div class="facebook-date">{{ item.created_at }}</div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <p v-show="loading" class="page-infinite-loading">
                            <mt-spinner type="fading-circle"></mt-spinner>
                            加载中...
                        </p>
                    </div>
                </div>
            </mt-loadmore>
            <div class="comment">
                <input type="text" placeholder="说点什么吧" maxlength="30" v-model="comment">
                <Button @click = "publish()">发送</Button>
            </div>
        </div>
    </div>
</template>
<script>
    /* eslint-disable no-unused-vars,quotes,no-trailing-spaces,spaced-comment,semi */
    import {DatetimePicker, Button, Toast} from 'mint-ui'
    export default {
      data () {
        return {
          list: [],
          commentList: [],
          loading: false,
          allLoaded: false,
          wrapperHeight: 0,
          comments_count: 0,
          topStatus: '',
          translate: 0,
          moveTranslate: 0,
          id: 0,
          likeCount: 0,
          isLike: 0,
          comment: ''
        };
      },
      methods: {
        loadMore () {
          this.loading = true;
          if (!this.allLoaded){
            setTimeout(() => {
              this.getCommentList();
              if (this.commentList.length >= this.comments_count){
                this.allLoaded = true;
              }
              this.loading = false;
            }, 1000);
          }else {
            this.loading = false;
          }
        },

        /**
         * 发表评论
         */
        publish(){
          console.log(this.comment);

          if(this.comment == ''){
              Toast('评论不能为空！');
          }else {
              this.$http.get("http://vue.mqphp.com/admin/api/do-comment?video_id=" + this.id + "&content=" + this.comment, {}).then(function (res) {
                  Toast(res.data.data.msg);
                  this.comment = '';
              }, function (err) {
                  Toast(err);
              })
          }
        },

        getList () {
          this.$http.get("http://vue.mqphp.com/admin/api/getComment?video_id="+this.id,{
          }).then(function(res){
            var data = res.body.data;
            this.list = this.list.concat(data); // 数据追加
              console.log(this.list);
              this.likeCount = data[0].likeCount;
          },function(err){
            console.log(err);
          })
        },

        handleTopChange(status) {
          this.moveTranslate = 1;
          this.topStatus = status;
        },
        loadTop() {
          setTimeout(() => {
            this.getCommentList();
            this.$refs.loadmore.onTopLoaded();
          }, 1500);
        },
        translateChange(translate) {
          const translateNum = +translate;
          this.translate = translateNum.toFixed(2);
          this.moveTranslate = (1 + translateNum / 70).toFixed(2);
        },
        getCommentList () {
          this.$http.get("http://vue.mqphp.com/admin/api/getComment?video_id="+this.id,{
          }).then(function(res){
            this.commentList = this.commentList = (res.body.comments); // 数据追加
            this.comments_count = res.body.comments_count;
          },function(err){
            console.log(err);
          })
        },
        like () {
          this.$http.get("http://vue.mqphp.com/admin/api/like?video_id="+this.id,{
          }).then(function(res){
            if (!res.body.status){
              Toast("已经点过赞了，不能再点");
            }else {
              Toast("点赞成功");
              this.likeCount += 1;
            }
            $('#like').removeClass("icon-xihuan1");
            $('#like').addClass("icon-xihuan");
            $('#like').css('color','red');
          },function(err){
            console.log(err);
          })
        },
      },
      mounted () {
        this.id = this.$route.params.video_id;
        this.getList();
        this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
//        for (let i = 1; i <= 20; i++) {
//          this.list.push(i);
//        }
      },

    };
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="css" scoped>
    @import "../../static/user-center.css";
    @import "../../static/font/iconfont.css";
</style>
